<template>
  <div>
    <div class="container">
      <div
        class="index-swiper"
        v-swiper:indexSwiper="indexSwiperOption"
        v-if="bannerData.length != 0"
      >
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(item, index) in bannerData"
            :key="index"
          >
            <div class="swiper-box">
              <img
                :src="$store.state.isMobile ? item.wap_thumb : item.thumb"
                alt=""
                class="banner-swiper"
                v-if="item.thumb"
              />
              <video
                width="100%"
                height="100%"
                controls="false"
                muted
                loop
                autoplay
                :src="item.video"
                v-if="item.video"
              ></video>
              <div
                class="text-box animated fadeInUp"
                v-show="index == aniIndex"
              >
                <p
                  class="info"
                  :style="{
                    color: item.desc_color,
                    fontSize: item.desc_size + 'rem',
                  }"
                >
                  {{ item.desc }}
                </p>
                <p
                  class="title"
                  :style="{
                    color: item.title_color,
                    fontSize: item.title_size + 'rem',
                  }"
                >
                  {{ item.title }}
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
      <div class="c_content">
        <div class="c_type">
          <div
            class="c_type_child"
            v-for="(item, index) in typeList"
            :key="item.id"
            @click="switchGoods(index)"
          >
            <div class="c_type_child_top">
              <img
                class="c_type_child_img"
                :class="{ c_type_child_img_active: current == index }"
                :src="item.service_logo"
                alt=""
              />
            </div>
            <div
              class="c_type_child_title"
              :class="{ c_type_child_title_active: current == index }"
            >
              {{ item.title }}
            </div>
          </div>
        </div>
        <div class="c_typelist">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="c_listbox">
                <img
                  :src="typeList[current].service_thumb"
                  alt=""
                  width="100%"
                  height="100%"
                  @click="goLink('chanpinluodi', typeList[current].id)"
                />
                <div class="c_listboxview">
                  <div
                    class="c_listboxviewf1"
                    :style="{
                      color: typeList[current].service_title_color,
                      fontSize: typeList[current].service_title_size + 'rem',
                    }"
                  >
                    {{ typeList[current].service_title }}
                  </div>
                  <div
                    class="c_listboxviewf2"
                    :style="{
                      color: typeList[current].service_info_color,
                      fontSize: typeList[current].service_info_size + 'rem',
                    }"
                  >
                    {{ typeList[current].service_info }}
                  </div>
                  <NuxtLink
                    class="c_listboxviewa"
                    :style="{
                      color: typeList[current].service_info_color,
                      fontSize: typeList[current].service_info_size + 'rem',
                    }"
                    :to="$i18n.path('chanpinluodi?id=' + typeList[current].id)"
                    exact
                  >
                    {{ $t("了解更多") }}>
                  </NuxtLink>
                </div>
              </div>
            </el-col>
            <el-col
              :span="6"
              v-for="(item, index) in GoodsList"
              :key="item.id"
              v-show="index < 2"
            >
              <div class="c_list" @click="goLink('serviceAndSupport', item.id)">
                <img class="c_list_img" :src="item.thumb" alt="" />
                <div class="c_list_f2">{{ item.info }}</div>
                <div class="c_list_f1">{{ item.title }}</div>
              </div>
            </el-col>
          </el-row>
          <div class="swiper" v-swiper:Swiper="SwiperOption">
            <div class="swiper-wrapper">
              <div
                class="swiper-slide"
                v-for="(item, index) in GoodsList"
                :key="item.id"
                v-show="index >= 2"
                @click="goLink('serviceAndSupport', item.id)"
              >
                <img :src="item.thumb" alt="" class="product-image" />
                <div class="product-info">{{ item.info }}</div>
                <div class="product-title">{{ item.title }}</div>
              </div>
            </div>
            <div class="swiper-scrollbar"></div>
          </div>
        </div>
        <!-- 产品支持 -->
        <div class="c_hexin">
          <div class="c_title">{{ $t("产品支持") }}</div>
          <el-row :gutter="20">
            <el-col :span="8" v-for="(a, index) in cpzc" :key="a.name">
              <div
                class="c_card"
                @click="
                  a.path === false ? (dialogFormVisible = true) : goLink(a.path)
                "
                @mouseenter="currentIndex = index + 1"
                @mouseleave="currentIndex = 0"
              >
                <img
                  class="c_card_img"
                  :src="currentIndex == index + 1 ? a.img_select : a.img"
                  alt=""
                />
                <div class="c_card_f1">{{ a.name }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- 联系客服 -->
        <div class="c_hexin">
          <div class="c_title">{{ $t("联系客服") }}</div>
          <el-row :gutter="20">
            <el-col :span="8">
              <div
                class="c_card"
                @mouseenter="currentIndex = 4"
                @mouseleave="currentIndex = 0"
              >
                <img
                  class="c_card_img"
                  :src="
                    currentIndex == 4
                      ? require('~/assets/images/youxiang.png')
                      : require('~/assets/images/c_youxiang.png')
                  "
                  alt=""
                />
                <div class="c_card_f1">{{ mailbox.title }}</div>
                <div class="c_card_f2">{{ mailbox.content }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div
                class="c_card"
                @mouseenter="currentIndex = 5"
                @mouseleave="currentIndex = 0"
              >
                <img
                  class="c_card_img"
                  :src="
                    currentIndex == 5
                      ? require('~/assets/images/rexian.png')
                      : require('~/assets/images/c_rexian.png')
                  "
                  alt=""
                />
                <div class="c_card_f1">{{ hotline.title }}</div>
                <div class="c_card_f2" v-html="hotline.content"></div>
              </div>
            </el-col>
            <el-col :span="8">
              <div
                class="c_card"
                @mouseenter="currentIndex = 6"
                @mouseleave="currentIndex = 0"
              >
                <img
                  class="c_card_img"
                  :src="
                    currentIndex == 6
                      ? require('~/assets/images/hezuo.png')
                      : require('~/assets/images/c_hezuo.png')
                  "
                  alt=""
                />
                <div class="c_card_f1">{{ $t("商务合作") }}</div>
                <div class="c_card_f2">{{ cooperation.content }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- APP下载 -->
        <div class="c_hexin">
          <div class="c_title">{{ $t("APP下载") }}</div>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="c_card1">
                <img
                  class="c_card_img"
                  src="~/assets/images/c_ios.png"
                  alt=""
                />
                <div>
                  <div class="c_card_f1">{{ $t("ios下载") }}</div>
                  <div class="c_card_f2">
                    {{ $t("APP store搜索“ePro Link”") }}
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="c_card1">
                <img
                  class="c_card_img"
                  src="~/assets/images/c_android.png"
                  alt=""
                />
                <div>
                  <div class="c_card_f1">{{ $t("Android下载") }}</div>
                  <div class="c_card_f2">
                    {{ $t("应用商城搜索“ePro Link”") }}
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <el-dialog
      :title="$t('请填写一下表单，我们会尽快与您联系')"
      :visible.sync="dialogFormVisible"
      width="1000rem"
      top="245rem"
      :center="true"
      :close-on-click-modal="false"
      custom-class="dialog-form"
    >
      <el-form :model="form" :rules="rules" :inline="true" ref="ruleForm">
        <el-form-item :label="$t('姓名')" prop="name">
          <el-input
            v-model="form.name"
            prop="name"
            :placeholder="$t('请输入姓名')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('邮箱')" prop="email">
          <el-input
            v-model="form.email"
            prop="email"
            :placeholder="$t('请输入邮箱号')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('电话')" prop="phone">
          <el-input
            v-model="form.phone"
            prop="phone"
            :placeholder="$t('请输入您的手机号')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('城市')" prop="city">
          <el-input
            v-model="form.city"
            prop="city"
            :placeholder="$t('请输入您所在城市')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('公司')" prop="company">
          <el-input
            v-model="form.company"
            prop="company"
            :placeholder="$t('请输入您的公司')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('职位')" prop="duty">
          <el-input
            v-model="form.duty"
            prop="duty"
            :placeholder="$t('请输入您的职位')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('其他')">
          <el-input
            type="textarea"
            v-model="form.content"
            :placeholder="$t('请输入其他内容')"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="from-btn" type="primary" @click="submitForm">{{
          $t("提交")
        }}</el-button>
      </div>
    </el-dialog>

    <div class="container_mobile">
      <div
        class="index-swiper"
        v-swiper:indexSwiper="indexSwiperOption"
        v-if="bannerData.length != 0"
      >
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(item, index) in bannerData"
            :key="index"
          >
            <div class="swiper-box">
              <img
                :src="$store.state.isMobile ? item.wap_thumb : item.thumb"
                alt=""
                class="banner-swiper"
                v-if="item.thumb"
              />
              <video
                width="100%"
                height="100%"
                controls="false"
                muted
                loop
                autoplay
                :src="item.video"
                v-if="item.video"
              ></video>
              <div
                class="text-box animated fadeInUp"
                v-show="index == aniIndex"
              >
                <p
                  class="info"
                  :style="{
                    color: item.desc_color,
                    fontSize: item.desc_size + 'rem',
                  }"
                >
                  {{ item.desc }}
                </p>
                <p
                  class="title"
                  :style="{
                    color: item.title_color,
                    fontSize: item.title_size + 'rem',
                  }"
                >
                  {{ item.title }}
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
      <div class="c_content">
        <div class="c_type">
          <div
            class="c_type_child"
            v-for="(item, index) in typeList"
            :key="item.id"
            @click="switchGoods(index)"
          >
            <div class="c_type_child_top">
              <img
                class="c_type_child_img"
                :class="{ c_type_child_img_active: current == index }"
                :src="item.service_logo"
                alt=""
              />
            </div>
            <div
              class="c_type_child_title"
              :class="{ c_type_child_title_active: current == index }"
            >
              {{ item.title }}
            </div>
          </div>
        </div>
        <div class="c_typelist">
          <el-row :gutter="10">
            <el-col
              :span="12"
              v-for="(item, index) in GoodsList"
              :key="item.id"
              v-show="index < 2"
            >
              <div class="c_list" @click="goLink('serviceAndSupport', item.id)">
                <img class="c_list_img" :src="item.thumb" alt="" />
                <div class="c_list_f1">{{ item.title }}</div>
                <div class="c_list_f2">{{ item.info }}</div>
              </div>
            </el-col>
          </el-row>
          <div class="mobile-swiper" v-swiper:mobileSwiper="mobileSwiperOption">
            <div class="swiper-wrapper">
              <div
                class="swiper-slide"
                v-for="(item, index) in GoodsList"
                :key="item.id"
                v-show="index >= 2"
                @click="goLink('serviceAndSupport', item.id)"
              >
                <img :src="item.thumb" alt="" class="product-image" />
                <div class="product-title">{{ item.title }}</div>
                <div class="product-info">{{ item.info }}</div>
              </div>
            </div>
            <div class="swiper-scrollbar"></div>
          </div>
        </div>
        <!-- 产品支持 -->
        <div class="c_hexin">
          <div class="c_title">{{ $t("产品支持") }}</div>
          <div style="display: flex">
            <div class="c_card2" @click="goLink('consignmentService')">
              <img
                class="c_card_img"
                src="~/assets/images/c_weixiu.png"
                alt=""
              />
              <div class="c_card_f1">{{ $t("维修服务支持") }}</div>
            </div>
            <div class="c_card-box">
              <div class="c_card" @click="goLink('servicePolicy')">
                <img
                  class="c_card_img"
                  src="~/assets/images/c_shouhou.png"
                  alt=""
                />
                <div class="c_card_f1">{{ $t("售后政策支持") }}</div>
              </div>
              <div class="c_card" @click="goLink('commonProblem')">
                <img
                  class="c_card_img"
                  src="~/assets/images/c_webti.png"
                  alt=""
                />
                <div class="c_card_f1">{{ $t("常见问题支持") }}</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 联系客服 -->
        <div class="c_hexin">
          <div class="c_title">{{ $t("联系客服") }}</div>
          <el-row :gutter="20">
            <el-col :span="24">
              <div class="c_card3">
                <img
                  class="c_card_img"
                  src="~/assets/images/c_weixiu.png"
                  alt=""
                />
                <div class="c_card_f1">{{ mailbox.title }}</div>
                <div class="c_card_f2">{{ mailbox.content }}</div>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="c_card3">
                <img
                  class="c_card_img"
                  src="~/assets/images/c_shouhou.png"
                  alt=""
                />
                <div class="c_card_f1">{{ hotline.title }}</div>
                <div class="c_card_f2" v-html="hotline.content"></div>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="c_card3">
                <img
                  class="c_card_img"
                  src="~/assets/images/c_webti.png"
                  alt=""
                />
                <div class="c_card_f1">{{ $t("商务合作") }}</div>
                <div class="c_card_f2">{{ cooperation.content }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- APP下载 -->
        <div class="c_hexin">
          <div class="c_title">{{ $t("APP下载") }}</div>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="c_card1">
                <img
                  class="c_card_img"
                  src="~/assets/images/c_ios.png"
                  alt=""
                />
                <div class="c_card_f1">{{ $t("ios下载") }}</div>
                <div class="c_card_f2">
                  {{ $t("APP store搜索“ePro Link”") }}
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="c_card1">
                <img
                  class="c_card_img"
                  src="~/assets/images/c_android.png"
                  alt=""
                />
                <div class="c_card_f1">{{ $t("Android下载") }}</div>
                <div class="c_card_f2">{{ $t("应用商城搜索“ePro Link”") }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var checkName = (rule, value, callback) => {
      if (
        !/(^[a-zA-Z][a-zA-Z\s]{0,20}[a-zA-Z]$)/.test(value) &&
        !/^(?:[\u4e00-\u9fa5·]{2,16})$/.test(value)
      ) {
        return callback(new Error(this.$t("请输入正确的姓名")));
      } else {
        callback();
      }
    };
    var checkPhone = (rule, value, callback) => {
      if (!/^[1][3,4,5,6.7,8,9][0-9]{9}$/.test(value)) {
        return callback(new Error(this.$t("请输入正确的电话号码")));
      } else {
        callback();
      }
    };
    var checkEmail = (rule, value, callback) => {
      if (
        !/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(
          value
        )
      ) {
        return callback(new Error(this.$t("请输入正确的邮箱号")));
      } else {
        callback();
      }
    };
    var checkCompany = (rule, value, callback) => {
      if (/^\d+$/.test(value) || !value) {
        return callback(new Error(this.$t("请输入正确的公司名")));
      } else {
        callback();
      }
    };
    var checkDuty = (rule, value, callback) => {
      if (/^\d+$/.test(value) || !value) {
        return callback(new Error(this.$t("请输入正确的职位名")));
      } else {
        callback();
      }
    };
    return {
      indexSwiperOption: {
        //顶部轮播图
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          type: "bullets",
        },
        loop: false,
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        slidesPerView: 1,
        spaceBetween: 0,
        speed: 800,
        on: {
          slideChangeTransitionEnd: function () {
            // console.log(this.realIndex, "this");
            that.aniIndex =
              this.activeIndex > that.bannerData.length ? 0 : this.realIndex;
          },
        },
      },
      aniIndex: 0,
      current: 0,
      currentIndex: 0,
      SwiperOption: {
        scrollbar: {
          el: ".swiper-scrollbar",
        },
        loop: false,
        autoplay: false,
        slidesPerView: 4,
        spaceBetween: 20,
      },
      mobileSwiperOption: {
        scrollbar: {
          el: ".swiper-scrollbar",
        },
        loop: false,
        autoplay: false,
        slidesPerView: 2,
        spaceBetween: 10,
      },
      cpzc: [
        {
          img: require("~/assets/images/c_weixiu.png"),
          img_select: require("~/assets/images/weixiu.png"),
          name: this.$t("维修服务支持"),
          path: "consignmentService",
        },
        {
          img: require("~/assets/images/c_shouhou.png"),
          img_select: require("~/assets/images/shouhou.png"),
          name: this.$t("售后政策支持"),
          path: "servicePolicy",
        },
        {
          img: require("~/assets/images/c_webti.png"),
          img_select: require("~/assets/images/webti.png"),
          name: this.$t("常见问题支持"),
          path: "commonProblem",
        },
      ],
      dialogFormVisible: false,
      form: {
        name: "",
        email: "",
        phone: "",
        city: "",
        company: "",
        duty: "",
        content: "",
      },
      rules: {
        name: [
          {
            required: true,
            validator: checkName,
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            validator: checkEmail,
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            validator: checkPhone,
            trigger: "blur",
          },
        ],
        city: [
          {
            required: true,
            message: this.$t("请输入您所在城市"),
            trigger: "blur",
          },
        ],
        company: [
          {
            required: true,
            validator: checkCompany,
            trigger: "blur",
          },
        ],
        duty: [
          {
            required: true,
            validator: checkDuty,
            trigger: "blur",
          },
        ],
      },
    };
  },
  async asyncData({ $indexApi }) {
    const bannerData = await $indexApi.getBannerData({ position: "service" });
    const typeList = await $indexApi.getGoodsList();
    const contactData = await $indexApi.getContact();
    const serviceInfo = await $indexApi.getServiceInfo();
    let mailbox = {};
    let hotline = {};
    let cooperation = {};
    contactData.data.forEach((el) => {
      switch (el.tag) {
        case "after_email":
          mailbox = el;
          break;
        case "after_tel":
          hotline = el;
          break;
        case "email":
          cooperation = el;
          break;
      }
    });
    let src;
    serviceInfo.data.forEach((el) => {
      if (el.name == "kefu_code") {
        src = el.value;
      }
    });
    // console.log(serviceInfo.data);

    return {
      bannerData: bannerData.data,
      mailbox: mailbox,
      hotline: hotline,
      cooperation: cooperation,
      typeList: typeList.data,
      GoodsList: typeList.data[0].list,
      serviceSrc: src,
    };
  },
  head() {
    //nuxt.js  head里获取不到location 请手动更改协议
    return {
      script: [
        {
          type: "text/javascript",
          src: this.serviceSrc,
        },
      ],
    };
  },

  beforeDestroy() {
    //每次关闭页面前销毁外部js创建的div
    document.getElementsByTagName("body")[0].lastChild.remove();
  },
  methods: {
    goLink(path, id) {
      this.$router.push({
        path: this.$i18n.path(path),
        query: {
          id: id,
        },
      });
    },
    switchGoods(index) {
      this.current = index;
      this.GoodsList = this.typeList[index].list;
    },
    submitForm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false;
          this.dialogFormVisible1 = false;
          // console.log(this.form);
          this.postMessage(this.form);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.container_mobile {
  display: none;
}

.container {
  background: #f2f2f2;
  display: block;
}

.index-swiper {
  width: 100%;

  :deep(.swiper-pagination-bullet) {
    width: 120rem;
    height: 3rem;
    border-radius: 2rem;
    background: #848e94;
    margin: 0 49rem;
  }
  :deep(.swiper-pagination-bullet-active) {
    background: #fff;
  }
  .swiper-pagination {
    width: 100%;
    bottom: 45rem;
  }

  .swiper-box {
    width: 100%;
    height: 560rem;
    overflow: hidden;
    position: relative;

    .banner-swiper {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .text-box {
      width: 100%;
      position: absolute;
      text-align: center;
      top: 40%;
      .info {
        font-size: 30rem;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #333333;
        margin: 0;
      }
      .title {
        font-size: 60rem;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        margin: 0;
        margin-top: 30rem;
      }
    }
  }
}

.c_content {
  padding: 40rem 100rem 150rem 100rem;

  .c_type {
    display: flex;

    .c_type_child {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      overflow: hidden;

      .c_type_child_top {
        overflow: hidden; //配合相对布局，将原图溢出容器并隐藏
        display: inline-block;
        width: 130rem;
        height: 130rem;
      }

      .c_type_child_img {
        height: 130rem;
      }

      .c_type_child_img_active {
        margin-left: -130rem;
        -webkit-filter: drop-shadow(130rem 0 0 #2ca2f1);
        filter: drop-shadow(130rem 0 0 #2ca2f1);
      }

      .c_type_child_title {
        margin-top: 40rem;
        font-size: 24rem;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #333333;
      }

      .c_type_child_title_active {
        color: #2ca2f1;
      }
    }
  }

  .c_typelist {
    margin-top: 100rem;

    .c_listbox {
      width: 100%;
      height: 420rem;
      margin-bottom: 20rem;
      position: relative;
      overflow: hidden;
      border-radius: 20rem;
      &:hover {
        img {
          transform: scale(1.2);
        }
      }
      img {
        object-fit: cover;
        transition: 0.6s;
        cursor: pointer;
      }

      .c_listboxview {
        height: 100%;
        top: 0;
        left: 60rem;
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .c_listboxviewf1 {
          font-size: 40rem;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #333333;
        }

        .c_listboxviewf2 {
          font-size: 20rem;
          font-family: Source Han Sans CN;
          font-weight: 300;
          color: #333333;
          margin: 17rem 0 47rem 0;
        }

        .c_listboxviewa {
          font-size: 20rem;
          font-family: Source Han Sans CN;
          font-weight: 300;
          text-decoration: underline;
        }

        .c_listboxviewa:hover {
          color: #2ca2f1 !important;
        }
      }
    }

    .c_list {
      background: #fff;
      border-radius: 20rem;
      height: 420rem;
      width: 100%;
      margin-bottom: 20px;
      text-align: center;
      border-radius: 20rem;
      cursor: pointer;

      &:hover {
        box-sizing: border-box;
        overflow: hidden;
        .c_list_img {
          transform: scale(1.2);
        }
      }

      .c_list_img {
        width: 300rem;
        height: 300rem;
        border-radius: 20rem;
        transition: 0.6s;
      }

      .c_list_f1 {
        font-size: 20rem;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #333333;
      }

      .c_list_f2 {
        font-size: 16rem;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #999999;
        margin: 20rem;
      }
    }

    .swiper {
      width: 100%;
      padding-bottom: 65rem;

      .swiper-slide {
        width: 400rem;
        height: 420rem;
        background: #ffffff;
        border-radius: 20rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;

        &:hover {
          box-sizing: border-box;
          &:hover {
            .product-image {
              transform: scale(1.2);
            }
          }
        }

        .product-image {
          width: 300rem;
          height: 300rem;
          transition: 0.6s;
        }

        .product-title {
          font-size: 20rem;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #333333;
          margin-bottom: 20rem;
        }

        .product-info {
          font-size: 16rem;
          font-family: Source Han Sans CN;
          font-weight: 300;
          color: #999999;
          margin: 20rem;
        }
      }

      .swiper-scrollbar {
        height: 10rem;
      }

      :deep(.swiper-scrollbar-drag) {
        background: #333333;
      }
    }
  }

  .c_hexin {
    .c_title {
      font-size: 54rem;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #333333;
      margin: 120rem 0 100rem 0;
      text-align: center;
    }

    .c_card {
      width: 100%;
      height: 300rem;
      background: #ffffff;
      border-radius: 20rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      cursor: pointer;

      &:hover {
        box-sizing: border-box;
        .c_card_img {
          transform: scale(1.2);
        }
      }

      .c_card_img {
        width: 70rem;
        height: 70rem;
        transition: 0.6s;
      }

      .c_card_f1 {
        font-size: 30rem;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #333333;
        margin: 30rem 0 20rem 0;
      }

      .c_card_f2 {
        font-size: 16rem;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #333333;
        padding: 0 78rem;
        text-align: center;
      }
    }

    .c_card1 {
      width: 100%;
      height: 300rem;
      background: #ffffff;
      border-radius: 20rem;
      display: flex;
      align-items: center;
      justify-content: center;
      &:hover {
        .c_card_img {
          transform: scale(1.4);
        }
      }

      .c_card_img {
        width: 140rem;
        height: 140rem;
        margin-right: 40rem;
        transition: 0.6s;
      }

      .c_card_f1 {
        font-size: 26rem;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #333333;
        margin-bottom: 15rem;
      }

      .c_card_f2 {
        font-size: 16rem;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #999999;
      }
    }
  }
  :deep(.dialog-form) {
    padding: 47rem 76rem 31rem 75rem;
    background: #ffffff;
    border-radius: 20rem;
  }

  :deep(.el-dialog__title) {
    font-size: 26rem;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #333333;
  }

  :deep(.el-form--inline) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  :deep(.el-input__inner) {
    width: 300rem;
    height: 50rem;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 10rem;
  }

  :deep(.el-textarea__inner) {
    width: 780rem;
    height: 120rem;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 10rem;
  }

  .from-btn {
    width: 240rem;
    height: 60rem;
    background: #333333;
    border: none;
    border-radius: 10rem;
    font-size: 26rem;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #ffffff;
    transition: 0.6s;
    &:hover {
      background: #000;
    }
  }
}

@media (max-width: 900px) {
  .container {
    display: none;
  }

  .container_mobile {
    background: #eeeeee;
    display: block;
    overflow-x: hidden;
  }

  .index-swiper {
    :deep(.swiper-pagination-bullet) {
      width: 21px;
      height: 1px;
      background: #606568;
      border-radius: 0px;
      margin: 0 18px;
    }
    :deep(.swiper-pagination-bullet-active) {
      background: #fff;
    }
    .swiper-pagination {
      width: 100%;
      bottom: 20px;
    }

    .swiper-box {
      height: auto;

      .banner-swiper {
        width: 100%;
        height: 550px;
        object-fit: cover;
      }
      .text-box {
        position: absolute;
        top: 20%;
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
        .info {
          font-size: 26px !important;
        }
        .title {
          font-size: 21px !important;
          margin: 15px 0;
        }
      }
    }
  }

  .c_content {
    padding: 10px;

    .c_type {
      display: flex;
      margin-top: 20px;

      .c_type_child {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        overflow: hidden;

        .c_type_child_top {
          overflow: hidden; //配合相对布局，将原图溢出容器并隐藏
          display: inline-block;
          width: 60px;
          height: 60px;
        }

        .c_type_child_img {
          height: 60px;
        }

        .c_type_child_img_active {
          margin-left: -59px;
          -webkit-filter: drop-shadow(60px 0 0 #2ca2f1);
          filter: drop-shadow(60px 0 0 #2ca2f1);
        }

        .c_type_child_title {
          margin-top: 12px;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #333333;
        }

        .c_type_child_title_active {
          color: #2ca2f1;
        }
      }
    }

    .c_typelist {
      margin-top: 20px;

      .c_list {
        background: #fff;
        border-radius: 7px;
        height: 200px;
        padding: 10px 0;
        width: 100%;
        margin-bottom: 10px;
        text-align: center;

        .c_list_img {
          width: 75%;
          height: 75%;
          border-radius: 7px;
        }

        .c_list_f1 {
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #333333;
          margin-bottom: 10px;
        }

        .c_list_f2 {
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 300;
          color: #999999;
        }
      }

      .mobile-swiper {
        width: 100%;

        .swiper-slide {
          width: 190px;
          height: auto;
          background: #ffffff;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: 25px;
          border-radius: 10px;

          .product-image {
            width: 85%;
          }

          .product-title {
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #333333;
            margin: 0;
            margin-bottom: 10px;
          }

          .product-info {
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 300;
            color: #999999;
            margin-bottom: 10px;
          }
        }

        .swiper-scrollbar {
          height: 4px;
        }

        :deep(.swiper-scrollbar-drag) {
          background: #333333;
        }
      }
    }

    .c_hexin {
      .c_title {
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #333333;
        margin: 30px 0 20px 0;
        text-align: center;
      }
      .c_card-box {
        width: calc(50% - 5px);
        margin-left: 10px;
      }

      .c_card2 {
        width: calc(50% - 5px);
        flex-shrink: 0;
        height: 210px;
        background: #ffffff;
        border-radius: 7px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        .c_card_img {
          width: 46px;
          height: 46px;
        }

        .c_card_f1 {
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #333333;
          margin-top: 10px;
        }
      }

      .c_card {
        width: 100%;
        height: 100px;
        background: #ffffff;
        border-radius: 7px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        cursor: pointer;

        .c_card_img {
          width: 46px;
          height: 46px;
        }

        .c_card_f1 {
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #333333;
          margin-top: 10px;
        }
      }

      .c_card3 {
        width: 100%;
        height: 127px;
        background: #ffffff;
        border-radius: 7px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        cursor: pointer;

        &:hover {
          border: 1px solid #2ca2f1;
          box-sizing: border-box;
        }

        .c_card_img {
          width: 46px;
          height: 46px;
        }

        .c_card_f1 {
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #333333;
          margin: 10px 0;
        }

        .c_card_f2 {
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 300;
          color: #333333;
          padding: 0 10px;
          text-align: center;
        }
      }

      .c_card1 {
        width: 100%;
        height: auto;
        padding: 10px 0;
        background: #ffffff;
        border-radius: 7px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .c_card_img {
          width: 80px;
          height: 80px;
          margin-right: 0;
        }

        .c_card_f1 {
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #333333;
          margin: 6px 0;
        }

        .c_card_f2 {
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 300;
          color: #999999;
        }
      }
    }
  }
}
</style>
